<template>
	<u-select ref="pop" @change="change" :model-value="props.show" value-name="region_id" label-name="region_name"
		mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
</template>

<script lang="ts" setup>
	import common from '../api/common'
	import {
		ref, onMounted, getCurrentInstance
	} from 'vue'
	interface Props {
		show ?: boolean
	}
	let proxy:any = getCurrentInstance().proxy
	const props = withDefaults(defineProps<Props>(), {
		show: false
	})
	let index = ref(0)
	let index2 = ref(0)
	let index3 = ref(0)
	const emit = defineEmits(['close', 'login'])
	let list = ref([])
	
	const confirm = (e) => {

	}
	const change = (v,i) => {
		console.log(v[i])
		switch (i) {
			case 0:
				index.value = i
				getCity(v[0].value)
				// setColumnData
				break
			case 1:
				index2.value = i
				getDistrict(v[1].value)
				break
			case 2:
				index3.value = i
				break
		}
	}
	// children
	
	//获取第二级
	const getCity = async (region_id ?: any) => {
		const res = await common.getArea({
			pid: region_id
		})
		res.data.map(v => v.children = [{
			region_name: '',
			region_id: ''
		}])
		list.value[index.value].children = res.data
		
		getDistrict(res.data[0].region_id)
	}
	//获取第三级
	const getDistrict = async (region_id ?: any) => {
		const res = await common.getArea({
			pid: region_id
		})
		list.value[index.value].children[index2.value].children = res.data
		
		console.log(list.value)
	}
	//获取第一级
	const getProvice = async (id ?: any) => {
		const res = await common.getArea({
			pid: id || '-1'
		})
		res.data.map(v => v.children = [{
			region_name: '',
			region_id: ''
		}])
		list.value = res.data
		getCity(res.data[0].region_id)
	}
	onMounted(() => {
		getProvice()
	})
</script>

<style>
</style>